/*
 * @Author: shawnxiao
 * @Date: 2021-11-02 14:09:14
 * @LastEditTime: 2021-11-12 16:02:28
 * @FilePath: /gatt-react/src/index/views/Home/components/GattDrag/components/GattDate/components/Slider.tsx
 */
import React, {useState, useEffect, useRef} from 'react'
import './Slider.less'
import { CaretUpFilled } from '@ant-design/icons'
import {getPerColor, looSetPer} from '../utils'
interface propsSlider{
  min:number
  max:number
  item:any
  fieldsAttr:any
  list:any
  setDataArr:any
  setIsShowMsg:any
  setIsMove:any
}

function Slider(props:propsSlider) {
  const {min, max, item, fieldsAttr, list, setDataArr, setIsShowMsg} = props
  const per = item.per
  const widths = item.widthChild
  const [width, setWidth] = useState<string>('0px')
  // 当前是否拖拽tip
  const [isMove, setIsMove] = useState<boolean>(false)
  const [scale, setScale] = useState<number>(0)
  const [perNum, setPerNum] = useState<number>(per)
  const sliderRef = useRef<any>(null)
  const thunkRef = useRef<any>(null)

  useEffect(() => {
    setScale( (perNum - min) / (max - min) )
    list.forEach((liItem:any) => {
      if (liItem.id === item.id){
        liItem.per = perNum
      }
    })
    setItemGroupPer(item, list)
    setDataArr([...list])
  }, [perNum, min, max])

const setItemGroupPer = (currentItem:any, arr:any[]) => {
  arr.length && arr.map((item:any) => {
    if (item.id === currentItem.id){
      //  改变当前的per进度
      item.per = perNum
      if (item?.popUpParams?.per){
        item.popUpParams.per = `${perNum}%`
      }
    }
  })
  if (item.parentId) {
    looSetPer(item.parentId, arr)
  }

}

  useEffect(() => {
    setWidth(widths * scale + 'px')
    // setLeft(widths * scale - thunkRef.current.offsetWidth / 2 + 'px')
  }, [widths, scale])

  const thunkMousedown = (e:any) => {
    e.stopPropagation()
    const widthNum = parseInt(width, 10)
    const disX = e.clientX
    setIsShowMsg(false)
    document.onmousemove = (e:any) => {
      setIsMove(true)
      props.setIsMove(true)
      const newWidth = e.clientX - disX + widthNum
      const scaleTmp = newWidth / sliderRef.current.offsetWidth
      const per1 = Math.ceil((max - min) * scaleTmp + min)
      const per2 = Math.max(per1, min)
      setPerNum(Math.min(per2, max))
    }
    document.onmouseup = () => {
      setIsMove(false)
      props.setIsMove(false)
      document.onmousemove = document.onmouseup = null
    }
    return false
  }

  return (
    <div className="slider"
      ref={sliderRef}
      style={{
        'backgroundColor': item?.perBgColor ? item.perBgColor : fieldsAttr?.per?.bgColor ? fieldsAttr.per.bgColor : ''
      }}
    >
      <div
        className="process"
        style={{
          width: `${parseInt(String(scale * 100), 10)}%`,
          'backgroundColor': item?.perProcessColor ? item.perProcessColor : fieldsAttr?.per?.processColors && (Object.keys(fieldsAttr.per.processColors).length) ? fieldsAttr.per.processColors[(getPerColor(Object.keys(fieldsAttr.per.processColors), item.per))] : ''
        }}
      ></div>
      <div
        className="thunk"
        ref={thunkRef}
        style={{left: `${parseInt(String(scale * 100), 10)}%`}}
      >
        <div className="block">
          <i className="el-icon-caret-top"
            onMouseDown={thunkMousedown}
          ><CaretUpFilled /></i>
        </div>
        {
          isMove ? (
          <div className="tips">
            <span>{ parseInt(String(scale * 100), 10) }</span>
            <i className="fas fa-caret-down"></i>
          </div>
          ) : null
        }
      </div>
    </div>
  )
}

export default Slider
